<template>
  <div id="data-view">
    <ue4View ref="ue4ViewerRef" :pickabled="pickabled" />
    <!-- <dv-full-screen-container> -->
    <div id="dv-full-screen-container">
      <div class="main-header">
        <div class="header-content">
          <div class="mh-left">
            <div class="logo"></div>
            <a-dropdown>
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                <div class="shrinkbtn opened"></div>
              </a>
              <a-menu slot="overlay" @click="changeProjectHandle">
                <a-menu-item key="test">
                  <a href="javascript:;"
                    >基于数字孪生的水利水电工程运维期场景仿真平台</a
                  >
                </a-menu-item>
                <a-menu-item key="demo">
                  <a href="javascript:;">测试项目</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <div class="title">{{ projectName }}</div>
          </div>
          <div class="mh-middle">
            <a
              class="BgCover btn"
              :class="active == 'home' ? 'active' : ''"
              :data-code="activeObj.home"
              @click="menuClick"
              >首页</a
            >
            <a
              class="BgCover btn"
              :data-code="activeObj.model"
              @click="menuClick"
              >模型管理</a
            >
            <a
              class="BgCover btn"
              :data-code="activeObj.device"
              @click="menuClick"
              >设备管理</a
            >
            <a
              class="BgCover btn"
              :data-code="activeObj.simulation"
              @click="menuClick"
              >仿真模拟</a
            >
            <a
              class="BgCover btn"
              :data-code="activeObj.material"
              @click="menuClick"
              >物资管理</a
            >
            <a
              class="BgCover btn"
              :data-code="activeObj.safe"
              @click="menuClick"
              >安全监测</a
            >
            <a
              class="BgCover btn"
              :data-code="activeObj.patrol"
              @click="menuClick"
              >巡查巡检</a
            >
          </div>
          <div class="mh-right">
            <div class="time-content">
              <div class="time-left">{{ curdatetime }}</div>
              <div class="time-right">
                <div class="date">{{ curdate }}</div>
                <div class="week">{{ curweektext }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <home :ref="activeObj.home" v-show="active == activeObj.home"></home>
      <model
        :ref="activeObj.model"
        v-show="active == activeObj.model"
        :ue4Viewer="ue4Viewer"
      ></model>
      <device
        :ref="activeObj.device"
        v-show="active == activeObj.device"
        :ue4Viewer="ue4Viewer"
      ></device>
      <simulation
        :ref="activeObj.simulation"
        v-show="active == activeObj.simulation"
        :ue4Viewer="ue4Viewer"
      ></simulation>
      <material
        :ref="activeObj.material"
        v-show="active == activeObj.material"
        :ue4Viewer="ue4Viewer"
      ></material>
      <safe
        :ref="activeObj.safe"
        v-show="active == activeObj.safe"
        :ue4Viewer="ue4Viewer"
      ></safe>
      <patrol
        :ref="activeObj.patrol"
        v-show="active == activeObj.patrol"
        :ue4Viewer="ue4Viewer"
      ></patrol>
    </div>
    <!-- </dv-full-screen-container> -->
    <div id="" class="layout-container"></div>
  </div>
</template>

<script>
import home from "./Home";
import ue4View from "@components/ue4View";
import model from "./ModelManage";
import device from "./DeviceManage";
import simulation from "./Simulation";
import material from "./MaterialManage";
import safe from "./SafeMonitor";
import patrol from "./Patrol";
export default {
  name: "Index",
  components: {
    home,
    ue4View,
    model,
    device,
    simulation,
    material,
    safe,
    patrol
  },
  data() {
    return {
      projectName: "基于数字孪生的水利水电工程运维期场景仿真平台",
      /**场景操作 */
      ue4Viewer: null,
      active: null,
      currentDate: new Date(),
      // 哪些菜单显示模型结构树
      showActives: ["model"],
      // 哪些菜单可以选中模型
      pickableActives: ["model", "safe", "device", "patrol", "material"],
      homeView: {
        pitch: -17.533750534057617,
        yaw: -91.68096160888672,
        location: { x: 13123.0283203125, y: 33980.3125, z: 10493.9287109375 }
      },
      activeObj: {
        /**首页 */
        home: "home",
        /**模型管理 */
        model: "model",
        /**设备管理 */
        device: "device",
        /**仿真模拟 */
        simulation: "simulation",
        /**物资管理 */
        material: "material",
        /**安全管理 */
        safe: "safe",
        /**巡查巡检 */
        patrol: "patrol"
      }
    };
  },
  methods: {
    /**项目切换 */
    changeProjectHandle(e) {
      console.log("changeProjectHandle", e);

      this.ue4Viewer.changeUe4name(e.key);
      this.projectName = e.domEvent.target.innerHTML;
    },
    /**菜单点击切换 */
    menuClick(e) {
      let ele = e.target;
      //设置当前按钮的class
      let eles = ele.parentElement.childNodes;
      for (let i = 0; i < eles.length; i++) {
        const node = eles[i];
        if (node == ele) {
          if (!node.classList.contains("active")) {
            node.classList.add("active");
          }
          //设置当前活动的菜单项
          if (ele.hasAttribute("data-code")) {
            this.active = ele.getAttribute("data-code");
          }
        } else {
          if (node.classList && node.classList.contains("active")) {
            node.classList.remove("active");
          }
        }
      }

      //阻止冒泡
      e.preventDefault();
    },
    /** 场景加载完成后 */
    ue4ViewLoaded() {
      let ue4 = this.$refs.ue4ViewerRef;
      this.ue4Viewer = ue4;
      return ue4;
    },
    getUrlKey(name) {
      return (
        decodeURIComponent(
          // eslint-disable-next-line no-sparse-arrays,standard/array-bracket-even-spacing
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    }
  },
  mounted() {
    this.ue4ViewLoaded();

    //获取参数
    let active = this.getUrlKey("active");
    if (this.activeObj[active]) {
      this.active = active;
    } else {
      this.active = "home";
    }
  },
  created() {
    //当前时间自动刷新
    setInterval(() => {
      let date = new Date();
      if (this.currentDate.getMinutes() != date.getMinutes()) {
        this.currentDate = new Date();
      }
    }, 1000);
  },
  computed: {
    /**当前时间 */
    curdatetime() {
      let date = this.currentDate;
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      return hour + ":" + minutes;
    },
    /**当前时间 */
    curdate() {
      let date = this.currentDate;
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    /**当前星期几 */
    curweektext() {
      let date = this.currentDate;
      var weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      var week = weekArr[date.getDay()];
      return week;
    },
    publicPath() {
      return window.location.origin + (process.env.BASE_URL || "/");
    },
    /**结构树是否显示 */
    showTree() {
      let showActives = this.showActives;
      return showActives.includes(this.active);
    },
    // 模型是否可以点击
    pickabled() {
      let actives = this.pickableActives;
      return actives.includes(this.active);
    }
  },
  watch: {
    active: {
      immediate: true,
      handler(newValue, oldValue) {
        let that = this;
        if (this.ue4Viewer && this.ue4Viewer.ueRendered) {
          //重置ue4场景
          this.ue4Viewer.reset();

          //切换到物资管理时，视角切换到货架模型视角
          if (newValue === this.activeObj.material) {
            let param = {
              location: {
                x: -8568.0654296875,
                y: 1720.822509765625,
                z: 4618.49072265625
              },
              pitch: -8.6973237991333,
              yaw: -160.47018432617188
            };
            this.ue4Viewer.flytoByParam(param);
          } else {
            let param = {
              location: {
                x: 7223.16748046875,
                y: 27077.62109375,
                z: 12857.2822265625
              },
              pitch: -23.4836368560791,
              yaw: -91.61992645263672
            };
            this.ue4Viewer.flytoByParam(param);
          }
        }
        if (newValue !== oldValue) {
          setTimeout(() => {
            //加载页面的默认加载事件
            let ref = that.$refs[oldValue];
            if (ref && typeof ref.unloadPage === "function") {
              ref.unloadPage();
            }
          }, 0);
        }
        if (newValue) {
          setTimeout(() => {
            //加载页面的默认加载事件
            let ref = that.$refs[newValue];
            if (ref && typeof ref.initPage === "function") {
              ref.initPage();
            }
          }, 0);
        }
      }
    }
  }
};
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  ::selection {
    background: gray;
  }

  .layout-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    // background: url(../assets/imgs/bg.png) no-repeat;
    // background-size: 100% 100%;
    pointer-events: none;
    box-shadow: inset 0px 150px 150px rgba(34, 55, 80, 1);
    // box-shadow: inset 0px 0px 120px 120px rgba(34, 55, 80, 1);
  }

  #dv-full-screen-container {
    width: 100%;
    // background-image: url("./img/bg.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    height: 100% !important;

    .number {
      font-family: Pang Men Zheng Dao;
    }

    .main-header {
      height: 92px;
      // height: 8.5185%;
      visibility: visible;

      .header-content {
        // height: 82px;
        height: calc(100% - 10px);
        width: calc(100% - 40px);
        background-image: url("../../assets/svg/TopBg.svg"); //1920*82
        background-repeat: no-repeat;
        background-size: contain;
        // background-size: 100%;
        // background-position: 20px 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;
        margin-top: 5px;
        user-select: none;
      }

      .mh-left {
        height: 100%;
        width: 590px;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        .logo {
          width: 80px;
          height: 80px;
          // margin-left: 20px;
          background-image: url("../../assets/svg/logo.svg");
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: 5px 12px;
        }

        .title {
          //font-size: 32px;
          font-size: 20px;
          color: #fff;
          margin-left: 0px;
          // width: 560px;
          text-indent: 5px;
          text-align: left;
        }

        a:visited {
          color: rgb(1, 134, 187);
        }

        .shrinkbtn {
          width: 15px;
          height: 15px;
          margin-left: 5px;
          cursor: pointer;
          background-image: url(../../assets/svg/arrow-right.svg);
          background-position: bottom center;
          background-repeat: no-repeat;
          background-size: cover;

          &.opened {
            background-image: url(../../assets/svg/arrow-down.svg);
          }
        }
      }

      .mh-middle {
        font-size: 30px;
        width: calc(100% - 784px);
        display: flex;

        .btn {
          width: 98px;
          height: 44px;
          line-height: 46px;
          background-image: url("../../assets/svg/Button1-1.svg");
          background-repeat: no-repeat;
          background-size: 100%;
          font-size: 18px;
          margin-left: 10px;
          margin-right: 10px;
          margin-bottom: 5px;
          display: inline-block;
          cursor: pointer;
          color: #fff;

          &.active {
            background-image: url("../../assets/svg//Button1-2.svg");
          }

          &:hover {
            background-image: url("../../assets/svg//Button1-2.svg");
          }
        }
      }

      .mh-right {
        height: 100%;
        width: 194px;
        display: flex;
        align-items: center;

        .time-content {
          width: 100%;
          height: 54px;
          margin-right: 10px;
          margin-bottom: 10px;
          background-image: url("../../assets/svg/TimeBg.svg"); //1920*82
          background-repeat: no-repeat;
          background-size: 100%;
          display: flex;

          .time-left {
            width: 50%;
            height: 100%;
            font-size: 30px;
            text-align: center;
            display: grid;
            align-items: center;
            vertical-align: bottom;
          }

          .time-right {
            width: 50%;
            height: 100%;
            font-size: 14px;

            div {
              height: 20px;
              line-height: 27px;
              text-align: left;
              text-indent: 5px;
            }

            .date {
              margin-top: 7px;
            }
          }
        }
      }
    }

    .main-container {
      height: calc(100% - 92px);
      // height: 91.4815%;
      position: relative;
      visibility: hidden;
      display: flex;

      .mc-top,
      .mc-bottom {
        box-sizing: border-box;
        padding: 30px;
        display: flex;
      }

      .mc-top {
        height: 40%;
      }

      .mc-bottom {
        height: 60%;
      }

      .top-left-cmp,
      .bottom-left-container {
        width: 32%;
      }

      .top-middle-cmp,
      .top-right-cmp {
        width: 34%;
      }

      .bottom-left-container {
        position: relative;

        .border-box-content {
          display: flex;
        }

        .mcb-decoration-1,
        .mcb-decoration-2 {
          position: absolute;
          left: 50%;
          margin-left: -2px;
        }

        .mcb-decoration-1 {
          top: 5%;
          transform: rotate(180deg);
        }

        .mcb-decoration-2 {
          top: 50%;
        }

        .bottom-left-chart-1,
        .bottom-left-chart-2 {
          width: 50%;
          height: 100%;
        }
      }

      .bottom-right-container {
        width: 68%;
        padding-left: 30px;
        box-sizing: border-box;
        display: flex;
      }
    }
  }

  span {
    color: #fff;
  }
}
</style>
